import { useState,useEffect, useRef} from 'react'
import type { CSSProperties, ReactNode } from 'react'

interface MyLazyLoadProps {
    className?: string,
    style?: CSSProperties,
    placeholder?: ReactNode,
    offset?: number,
    width?: number,
    height?: number,
    onContentVisible?: () => void,
    children: ReactNode,
}

export default function MyLazyLoad(props: MyLazyLoadProps) {
    const { className = "", style, placeholder, offset=0, width, height, onContentVisible, children } = props
    const [visible, setVisible] = useState(false)
    const elementObserver =useRef<IntersectionObserver>()
    const containerRef = useRef<HTMLDivElement>(null)

    function lazyLoadHandler(entries:IntersectionObserverEntry[]){
        const [entry] =entries
        const {isIntersecting} =entry
        if(isIntersecting){
            setVisible(true)
            onContentVisible?.()
            const node =containerRef.current
            if(node){
                elementObserver.current?.unobserve(node)
            }
        }
    }
    useEffect(()=>{
        const options ={
            rootMargin: `${offset}px`,
            threshold: 0,
        }
        elementObserver.current=new IntersectionObserver(lazyLoadHandler,options)
        const node = containerRef.current
        if(node){
            elementObserver.current.observe(node)
        }
    },[])

    return (
        <div ref={containerRef} className={className} style={style}>
            {visible ? children : placeholder}
        </div>
    )
}
